<!-- 参政议政 -->
<template>
  <Pannel ref="oPannel" @load="handleLoadData" @refresh="handleRefresh">
    <view class="pannel-inner-box">
           <NavBar title="党员信息"></NavBar>
      <image class="bg-image" :src="bg" mode="widthFix" />
      <!-- 搜索框 -->
      <uni-search-bar class="search-wrap" radius="100" placeholder="请输入搜索信息" clearButton="auto" cancelButton="none" @confirm="handleSearch" />

      <view class="area-2 list" v-if="data1.result && data1.result.length">
        <view class="item" v-for="(item, index) of data1.result" :key="index" @click="onJump({ url: '/subPack/dyxs/detail' }, item.id)">
          <view class="header">
            <view class="title">{{ item.xm }}</view>
            <view class="datail-btn iconfont icon-jiantou"></view>
          </view>
          <view class="content">
            <view class="row">
              <view class="text">性别</view>
              <view class="num">{{ item.xb == 1 ? '男' : '女' }}</view>
            </view>
            <view class="row">
              <view class="text">手机号</view>
              <view class="num">{{ item.sj }}</view>
            </view>
              <view class="row">
              <view class="text">入民革时间</view>
              <view class="num">{{ item.rmgsj }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

  </Pannel>
</template>

<script lang="ts" setup>
import bg from "./static/base64/list_bg";

import useDetail from '@/store/detail';
import { useYear } from '@/store/index';
import { requestPost } from '@/hooks/api';
import { ref } from 'vue'

//  用于传递 detail 页面数据
const [ , setDetail ] = useDetail();
const [ year ] = useYear();
//  组件实例
const oPannel = ref(null) as any;

const keywords = {
  xm: '',
  year: year.value
}

// 党员列表
const [ data1, fetchData1 ] = requestPost('/ascreen/home/partyMemberHomeList/ajax');

const handleSearch = (e: any) => {
  keywords.xm = e.value || '';
  oPannel.value.dataLoad(() => fetchData1(keywords));
}

const onJump = (data: any, params: any = {}) => {
  setDetail(params);
  uni.navigateTo(data);
}

//  下拉刷新
const handleRefresh = async (callback: any) => {
  callback( fetchDatas );
};

const handleLoadData: any = (callback: any): any => {
  callback(fetchDatas);
};

async function fetchDatas() {
  await fetchData1(keywords);
}
</script>

<style lang="scss" scoped>
.image {
  width: 100%;
  height: 100%;
}

.pannel-inner-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;

  .bg-image {
    position: absolute;
    width: 100%;
    z-index: 0;
  }

  .search-wrap {
    margin-top: 208rpx;
    width: 100%;
  }

  .area-2 {
    display: flex;
    flex-direction: column;
    width: 686rpx;
    z-index: 1;

    .item {
      margin-bottom: 32rpx;
      width: 100%;
      background: #fff;
      border-radius: 16rpx;
      padding: 0 20rpx 20rpx 20rpx;
      box-sizing: border-box;
      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.03);

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 96rpx;

        .title {
          font-size: 28rpx;
          font-weight: bold;
        }

        .datail-btn {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 40rpx;
          height: 40rpx;
          background: #faf2e0;
          border-radius: 50%;

          font-size: 26rpx;
          font-weight: bold;
          color: #d39f59;
        }
      }

      .content {
        .row {
          display: flex;
          justify-content: space-between;
          font-size: 28rpx;
          margin-top: 20rpx;

          &:first-child {
            margin-top: 0;
          }

          .text {
            color: #666666;
          }
        }
      }
    }
  }
}
</style>
